<template>
	<view class="index-home p-t-20">
		<!-- 轮播 -->
		<ad-swipers :pid="7" height="312rpx" padding="0 30rpx" radius="20rpx"></ad-swipers>

		<bubble-tips top="280rpx" :discharge="isDischarge"></bubble-tips>
		<view class="content">
			<!-- 导航入口 -->
			<!-- <view class="nav bg-white m-t-20" v-if="newNavList.length">
                <swiper :style="'height:' + navSwiperH + 'rpx;'" @change="swiperChange">
                    <swiper-item v-for="(items, index) in newNavList" :key="index">
                        <view class="nav-list flex flex-wrap">
                            <view
                                v-for="(item, index2) in items"
                                :key="index2"
                                class="nav-item m-t-30"
                                @tap="menuJump(item)"
                            >
                                <view class="flex-col col-center">
                                    <image class="nav-icon m-b-15" :src="item.image"></image>
                                    <view class="name xs">{{ item.name }}</view>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
                <view class="dots" v-if="newNavList.length > 1">
                    <view
                        v-for="(item, index) in newNavList"
                        :key="index"
                        :class="'dot ' + (index == currentSwiper ? 'active' : '')"
                    ></view>
                </view>
            </view> -->
			<!-- 中部广告 -->
			<!--  <ad-swipers
                :pid="8"
                height="165rpx"
                :is-swiper="false"
                padding="20rpx 0 0"
                radius="20rpx"
            > -->
			</ad-swipers>
			<!-- 资讯 -->
			<router-link v-if="newsList.length" class="" :to="{ path: '/pages/news_list/news_list' }">
				<view class="information bg-white flex m-t-20">
					<view class="notice">
						最新公告
					</view>
					<text class="gap-line"></text>
					<view class="news flex-1 flex">
						<view class="shade"></view>
						<swiper class="flex-1" autoplay="true" style="height: 76rpx" vertical="true" circular="true"
							:interval="3000">
							<swiper-item v-for="(item, index) in newsList" :key="index" class="flex">
								<view class="flex-none">
									<u-tag v-if="item.is_new" shape="circle" text="最新" size="mini" type="primary"
										mode="plain" />
								</view>
								<view class="text-swiper m-l-10 line-1">{{ item.title }}</view>
							</swiper-item>
						</swiper>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</router-link>
			<!-- 活动专区 -->
			<view class="activity-zone m-t-20" >
				<view class="left">
					<view class="left_font1">
						充值好礼
					</view>
					<view class="left_font2">
						充值多奖励大!
					</view>
				</view>
				<view class="right">
					<view class="right_font1">
						加入小二
					</view>
					<view class="right_font2">
						同城配送更便捷!
					</view>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->

		</view>
		<!-- #endif -->
		<!-- 秒杀 -->


		<!-- 附近店铺 -->
		<!-- <view class="m-t-20" >
                <shop-recommend
                    type="nearby-shops"
                    title="附近店铺"
                    :list="nearbyShop"
                    url="/bundle_b/pages/nearby_shops/nearby_shops"
                ></shop-recommend>
            </view> -->
		<view class="external">
			<view class="interiorTop">
				<view class="leftFont">
					会员升级
				</view>
				<view class="lever">
				</view>
				<view class="rightFont">
					充值会员好礼多多，更多惊喜等你来
				</view>
			</view>
			<view class="interior">
				<view class="member">
					<view>
						<img class="header_style" src="../../static/images/touxiang.png" alt="" />
					</view>
					<text>陈大侠</text>
					<view class="grade">
						v1
					</view>
					<view class="date">
						2024-12-01
					</view>
					<view class="buy">
						成功购买了会员
					</view>
				</view>
				<view class="member">
					<view>
						<img class="header_style" src="../../static/images/touxiang.png" alt="" />
					</view>
					<text>陈大侠</text>
					<view class="grade">
						v1
					</view>
					<view class="date">
						2024-12-01
					</view>
					<view class="buy">
						成功购买了会员
					</view>
				</view>
				<view class="member">
					<view>
						<img class="header_style" src="../../static/images/touxiang.png" alt="" />
					</view>
					<text>陈大侠</text>
					<view class="grade">
						v1
					</view>
					<view class="date">
						2024-12-01
					</view>
					<view class="buy">
						成功购买了会员
					</view>
				</view>

			</view>
		</view>
		
		<view class="firm" style="overflow: hidden;">
			<view class="" style="margin: 40rpx; ">
				<view class="firm_font1">
					企业用水
				</view>
				<view class="firm_font2">
					充值得好礼，水卡超值购
					
				</view>
				<router-link to="/pages/bill_data/bill_data">
					<view class="firm_font3" >
						去消费>>
					</view>
				</router-link>
				
			</view>
		</view>
 
		<view class="m-t-20">
			<active-area :list="hotGoods" type="hot"  title="积分获得区"
				url="/bundle/pages/integral_mall/integral_mall"></active-area>
		</view>
		<view class="m-t-20">
			<active-area :list="hotGoods" type="hot" title="购物券兑换"
				url="/pages/active_list/active_list"></active-area>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		arraySlice,
		menuJump
	} from '@/utils/tools'
	import {
		mapGetters
	} from 'vuex'
	export default {
		props: {
			navList: {
				type: Array,
				default: () => []
			},
			list: {
				type: Array,
				default: () => []
			},
			homeData: {
				type: Object,
				default: () => ({})
			},
			liveList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				newNavList: [],
				navSwiperH: '',
				currentSwiper: 0,
				isDischarge: false,
				goodsList: []
			}
		},
		mounted() {
			this.isDischarge = false
		},
		destroyed() {
			this.isDischarge = true
		},
		methods: {
			swiperChange(e) {
				console.log(e)
				this.currentSwiper = e.detail.current
			},
			menuJump(item) {
				menuJump(item)
			}
		},
		watch: {
			navList(val) {
				if (val.length <= 5) {
					this.navSwiperH = 200
				} else {
					this.navSwiperH = 374
				}
				this.newNavList = arraySlice(val)
			},
			list(val) {
				this.goodsList = val
			}
		},
		computed: {
			...mapGetters(['appConfig']),
			newsList() {
				return this.homeData.headlines || []
			},
			nearbyShop() {
				return this.homeData.nearby_shops || []
			},
			hotGoods() {
				return this.homeData.hots || []
			},
			newGoods() {
				return this.homeData.news || []
			},
			communityArticle() {
				return this.homeData.community_article || []
			},
			activityList() {
				return this.homeData.activity_area || []
			},
			shopRecommend() {
				return this.homeData.shop_recommend || []
			},
			shopLists() {
				return this.homeData.shop_lists || []
			},
			seckillGoods() {
				return this.homeData.seckill_goods || []
			},
			activityArea() {
				return this.homeData.activity_area || []
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-home {
		.content {
			padding: 0 30rpx 20rpx;

			.nav {
				position: relative;
				border-radius: 20rpx;

				.nav-item {
					width: 20%;

					.nav-icon {
						width: 82rpx;
						height: 82rpx;
					}
				}

				.dots {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 20rpx;
					display: flex;

					.dot {
						width: 10rpx;
						height: 6rpx;
						border-radius: 6rpx;
						margin-right: 10rpx;
						background-color: rgba(255, 44, 60, 0.4);

						&.active {
							width: 20rpx;
							background-color: $-color-primary;
						}
					}
				}
			}

			.external {
				width: 696rpx;
				height: 364rpx;
				background-color: #0271E4;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.interiorTop {
					display: flex;
					width: 696rpx;
					height: 64rpx;

					.leftFont {
						height: 42rpx;
						font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
						font-weight: 600;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 64rpx;
						margin-left: 20rpx;

					}

					.lever {
						width: 2rpx;
						height: 30rpx;
						background-color: #FFFFFF;
						margin: 19rpx 19rpx;

					}

					.rightFont {

						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 64rpx;
						text-align: left;

					}
				}

				.interior {
					width: 684rpx;
					height: 295rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					margin-left: 6rpx;

					.member {
						width: 665rpx;
						height: 94rpx;
						// background-color: #0271E4;
						margin-left: 15rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.header_style {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50rpx;
							// margin-top: 29rpx;
						}

						.grade {
							width: 74rpx;
							height: 35rpx;
							box-shadow: 0rpx 3rpx 5rpx 1rpx rgba(0, 0, 0, 0.03);
							border-radius: 5rpx;
							border: 2rpx solid #0271E4;
							font-size: 28rpx;
							text-align: center;
							line-height: 35rpx;
							color: #0271E4;
						}

						.date {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 35rpx;

						}

						.buy {

							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #0271E4;
							line-height: 35rpx;

						}
					}
				}

			}

			.information {
				height: 76rpx;
				box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
				padding: 0 20rpx;
				border-radius: 20rpx;

				.notice {
					width: 136rpx;
					height: 48rpx;
					background: #0271E4;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					text-align: center;
					line-height: 48rpx;
					color: #FFFFFF;


					font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
					font-weight: 600;
					font-size: 28rpx;


				}

				.news {
					position: relative;

					.shade {
						position: absolute;
						width: 100%;
						height: 100%;
						z-index: 100;
					}
				}

				.icon-toutiao {
					width: 114rpx;
					height: 34rpx;
				}

				.gap-line {
					height: 28rpx;
					width: 1px;
					background-color: #dcdddc;
					margin: 0 30rpx;
				}
			}

			.title-iamge {
				width: 200rpx;
				height: 100rpx;
			}
			.firm{
				width: 710rpx;
				height: 200rpx;
				background-color: #aad8ff;
				border-radius: 15rpx;
				.firm_font1{
				height: 50rpx;
					font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
					font-weight: bold;
					font-size: 50rpx;
					color: #0271E4;
					line-height: 35rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.firm_font2{
					font-size: 28rpx;
					color: #0271E4;
					margin: 0 0 10rpx 0;
				}
				.firm_font3{
					width: 128rpx;
					height: 40rpx;
					border-radius: 76rpx 76rpx 76rpx 76rpx;
					border: 1rpx solid #0271E4;
					text-align: center;
					line-height: 40rpx;
					font-size: 24rpx;
				}
			}

			.activity-zone {
				display: flex;
				margin-bottom: 20rpx;

				.left {
					width: 360rpx;
					height: 200rpx;
					// background-color: burlywood;
					border-radius: 14rpx;
					background-image: url(../../static/images/cz_bg.png);
					background-size: 100% 100%;
					.left_font1{
						margin: 30rpx 0 10rpx 20rpx;
						color: #D13535;
						font-size: 38rpx;
					}
					.left_font2{
						margin-left: 20rpx;
						color: #D56D6D;
						font-size: 24rpx;
					}
				}

				.right {
					width: 360rpx;
					height: 200rpx;
					// background-color: burlywood;
					border-radius: 14rpx;
					margin-left: 30rpx;
					background-image: url(../../static/images/xe_bg.png);
					background-size: 100% 100%;
					.right_font1{
						margin: 30rpx 0 10rpx 20rpx;
						color:#0271E4;
						font-size: 38rpx;
					}
					.right_font2{
						margin-left: 20rpx;
						color: #80ADDB;
						font-size: 24rpx;
					}
					
				}

				// background-image: url();

				.item {
					border-radius: 14rpx;
					width: 324rpx;
					padding: 20rpx 16rpx;

					.desc {
						width: 160rpx;
					}

					.btn {
						display: inline-block;
						padding: 2rpx 20rpx;
					}
				}
			}

			.live {
				background: linear-gradient(180deg,
						rgba(255, 233, 233, 1) 0%,
						rgba(255, 255, 255, 1) 74%);
				padding-bottom: 28rpx;
				border-radius: 14rpx;

				.live-header {
					padding: 28rpx 24rpx;
				}
			}
		}
	}
</style>